.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/bg/night.jpg");
  padding-top: 200rpx;
}

.info {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  .address {
    opacity: 0.7;
    color: #FFF;
    font-size: 28px;
    margin-bottom: 20rpx;
  }

  .city {
    margin-left: 8px;
  }

  .date {
    opacity: 0.7;
    color: #FFF;
    font-size: 13px;
  }
}

.data {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

  .temp {
    color: #FFF;
    margin-top: 80rpx;

    .value {
      font-size: 120px;
    }

    .symbol {
      font-size: 30px;
    }
  }
}

.detail-box {
  width: 100vw;
  display: flex;
  justify-content: center;

  .detail {
    background-color: #FFF;
    width: calc(100% - 100rpx);
    height: 240rpx;
    margin-top: 40rpx;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(100rpx);
    border-radius: 30rpx;
    color: white;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.8;
    display: flex;
  }

  .item {
    width: 100px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .icon {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    margin-top: 0rpx;
    margin-bottom: 25rpx;
    color: #fff;
    background-repeat: no-repeat;
    position: relative;
    left: 20rpx;
    top: 25rpx;
  }

  .text {
    display: flex;
    flex-wrap: nowrap;
    word-break: keep-all;
    font-size: 12px;
  }

  .temp {
    .icon {
      background-size: 75%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E5%B8%B8%E6%B8%A9%20.svg");
      position: relative;
      top: 22rpx;
      left: 12rpx;
    }
  }
  
  .humidity {
    .icon {
      left: 18rpx;
      background-size: 65%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E6%B9%BF%E5%BA%A6.svg");
    }
  }

  .pm {
    .icon {
      background-size: 65%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/pm2.5%E6%84%9F%E5%BA%94%E5%99%A8.svg");
    }
  }

  .rays {
    .icon {
      background-size: 65%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E7%B4%AB%E5%A4%96%E7%BA%BF.svg");
    }
  }

  .wind {
    .icon {
      background-size: 65%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E9%A3%8E%E5%90%91.svg");
    }
  }
}

.sun {
  width: 100vw;
  display: flex;
  justify-content: center;

  .sun-box {
    background-color: #FFF;
    width: calc(100% - 100rpx);
    height: 300rpx;
    margin-top: 80rpx;
    background: rgba(100, 180, 255, 0.3);
    backdrop-filter: blur(100rpx);
    border-radius: 30rpx;
    color: white;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.8;
    display: flex;
  }

  .detail {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .item {
    width: 100px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .icon {
    width: 100rpx;
    height: 100rpx;
    display: flex;
    margin-top: 0rpx;
    margin-bottom: 25rpx;
    color: #fff;
    background-repeat: no-repeat;
    position: relative;
    left: 10rpx;
  }

  .text {
    display: flex;
    flex-wrap: nowrap;
    word-break: keep-all;
    font-size: 12px;
  }

  .sunrise {
    .icon {
      background-size: 85%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E6%97%A5%E5%87%BA.svg");
    }
  }

  .sunset {
    .icon {
      background-size: 85%;
      background-image: url("https://cdn.hanxiaoxin.cn/miniprogram/icon/%E6%97%A5%E8%90%BD.svg");
    }
  }
}